#!/usr/bin/env python
# -*- coding: utf-8 -*-

from common import caller

def print_title(date, top, topic):
    print '''
    <div class="container" style="padding: 30px 15px 0;">
        <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">%s &nbsp;&nbsp; #%s &nbsp;&nbsp; %s</h3>
            </div>
          </div>
    </div>
    <br/>
    ''' % (date, top, topic)

def print_graph():
    print '''
    <div class="container">
        <div class="col">
              <div class="panel panel-info row-sm-3">
                <div class="panel-heading">
                      <h3 class="panel-title">Frequency By Hour</h3>
                </div>
                <div class="panel-body">
                    <div>
                          <canvas id="linechart_hour" style=" max-height: 300px;height: auto !important;"></canvas>
                    </div>
                </div>
              </div>
            
            <br/>
            <div class="panel panel-info row-sm-3">
                <div class="panel-heading">
                      <h3 class="panel-title">Frequency Cycle</h3>
                </div>
                <div class="panel-body">
                    <div>
                          <canvas id="linechart" style=" max-height: 300px;height: auto !important;"></canvas>
                    </div>
                </div>
              </div>
            
            <br/>
            
            <div class="panel panel-info ">
                <div class="panel-heading">
                    <h3 class="panel-title">Hot Twitter</h3>
                </div>
                <div class="panel-body row-sm-6">
                      <div id="networkchart" style="height:400px;"></div>
                </div>
            </div>
            
            
         </div>
        
    </div><!-- /container -->
    '''

def print_script(date, topic):
    fre_hour = caller.get_frequence_by_hour(date, topic)
    fre_month = caller.get_frequence_between_date(topic, '20151001', '20151031')
    html = '''
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!-- <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="../bootstrap-3.3.5/js/bootstrap.min.js"></script>

    <!-- Charts ======================================================================================= -->
    
    <!-- Network Chart -->
    <script src="../vis/vis.js"></script>
    <script type="text/javascript">
    var nodes = null;
    var edges = null;
    var network = null;

    function drawnetwork() {
      // create people.
      // value corresponds with the age of the person
      nodes = [
        {id: 1,  value: 2,  label: 'Algie' },
        {id: 2,  value: 31, label: 'Alston'},
        {id: 3,  value: 12, label: 'Barney'},
        {id: 4,  value: 16, label: 'Coley' },
        {id: 5,  value: 17, label: 'Grant' },
        {id: 6,  value: 15, label: 'Langdon'},
        {id: 7,  value: 6,  label: 'Lee'},
        {id: 8,  value: 5,  label: 'Merlin'},
        {id: 9,  value: 30, label: 'Mick'},
        {id: 10, value: 18, label: 'Tod'},
      ];

      // create connections between people
      // value corresponds with the amount of contact between two people
      edges = [
        {from: 2, to: 8, value: 3, arrows: 'to', title: '3 emails per week'},
        {from: 2, to: 9, value: 5, title: '5 emails per week'},
        {from: 2, to: 10,value: 1, title: '1 emails per week'},
        {from: 4, to: 6, value: 8, title: '8 emails per week'},
        {from: 5, to: 7, value: 2, title: '2 emails per week'},
        {from: 4, to: 5, value: 1, title: '1 emails per week'},
        {from: 9, to: 10,value: 2, title: '2 emails per week'},
        {from: 2, to: 3, value: 6, title: '6 emails per week'},
        {from: 3, to: 9, value: 4, title: '4 emails per week'},
        {from: 5, to: 3, value: 1, title: '1 emails per week'},
        {from: 2, to: 7, value: 4, title: '4 emails per week'}
      ];

      // Instantiate our network object.
      var container = document.getElementById('networkchart');
      var data = {
        nodes: nodes,
        edges: edges
      };
      var options = {
        nodes: {
          shape: 'dot',
          scaling:{
            label: {
              min:8,
              max:20
            }
          }
        }
      };
      
      network = new vis.Network(container, data, options);
    }
    
    
    </script>
    <!-- Line Chart -->
    <script src="../Chart.js.1.2/Chart.js"></script>
    <script type="text/javascript">
    '''
    html += ''' 
    var lineChartHourData = {
        labels : [%s],
        datasets : [
            {
                label: "Frequency",
                fillColor : "rgba(151,187,205,0.2)",
                strokeColor : "rgba(151,187,205,1)",
                pointColor : "rgba(151,187,205,1)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "#fff",
                pointHighlightStroke : "rgba(151,187,205,1)",
                data : [%s]
            }
        ]

    }
    ''' % (caller.list_to_string_by_col(fre_hour, 0), caller.list_to_string_by_col(fre_hour, 1))
    html += ''' 
    var lineChartData = {
        labels : [%s],
        datasets : [
            {
                label: "Frequency",
                fillColor : "rgba(151,187,205,0.2)",
                strokeColor : "rgba(151,187,205,1)",
                pointColor : "rgba(151,187,205,1)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "#fff",
                pointHighlightStroke : "rgba(151,187,205,1)",
                data : [%s]
            }
        ]

    }
    ''' % (caller.list_to_string_by_col(fre_month, 0), caller.list_to_string_by_col(fre_month, 1))
    html += '''
    window.onload = function(){
        
        drawnetwork();
        var ctx2 = document.getElementById("linechart_hour").getContext("2d");
        window.myLineHour = new Chart(ctx2).Line(lineChartHourData, {
            responsive: true,
            maintainAspectRatio: true
        });
        var ctx = document.getElementById("linechart").getContext("2d");
        window.myLine = new Chart(ctx).Line(lineChartData, {
            responsive: true,
            maintainAspectRatio: true
        });
    }

    </script>
    
    <script src="../vis/googleAnalytics.js"></script>
    
    ''' 
    print html